<template>
  <div>
    <ul>
      <li class="oneLine" v-for="item in sixty" :key="item">
        <p>{{ item.slice(0,4) }}</p>
        <input type="text" name="" id="" :placeholder="item.slice(4)"/>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "sixTy",
  data() {
    return {
			sixty:[
			"甲子乙丑海中金",
			"丙寅丁卯炉中火",
			"戊辰己巳大林木",
			"庚午辛未路旁土",
			"壬申癸酉剑锋金",
			"甲戌乙亥山头火",
			"丙子丁丑涧下水",
			"戊寅己卯城头土",
			"庚辰辛巳白蜡金",
			"壬午癸未杨柳木",
			"甲申乙酉泉中水",
			"丙戌丁亥屋上土",
			"戊子己丑霹雳火",
			"庚寅辛卯松柏木",
			"壬辰癸巳长流水",
			"甲午乙未沙中金",
			"丙申丁酉山下火",
			"戊戌己亥平地木",
			"庚子辛丑壁上土",
			"壬寅癸卯金箔金",
			"甲辰乙巳覆灯火",
			"丙午丁未天河水",
			"戊申己酉大驿土",
			"庚戌辛亥钗钏金",
			"壬子癸丑桑柘木",
			"甲寅乙卯大溪水",
			"丙辰丁巳沙中土",
			"戊午己未天上火",
			"庚申辛酉石榴木",
			"壬戌癸亥大海水"
			]
		};
  },
	methods:{
		rOrN(title){
			
		}
	},
	computed:{
		sixtyP(){
			const list=[]
			this.sixty.forEach(item => {
				list.push(item.slice(0,4))
			});
			return list
		}
	}
};
</script>

<style>
.oneLine{
	display: flex;
}
li{
	list-style: none;
}
input{
	height: 30px;
	padding: 0;
	margin-top: 10px;
}
</style>